<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Standard Module Format</title>
<link rel="stylesheet" type="text/css" media="all" href="../../core/libraries.css" />
<link rel="stylesheet" type="text/css" media="all" href="../../core/template/template.css" />
<link rel="stylesheet" type="text/css" media="all" href="../../core/grid/grids.css" />
<link rel="stylesheet" type="text/css" media="all" href="../../core/content.css" />
<link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod.css" />
<link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod_skins.css" />
<!--<link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod_debug.css" /> -->
</head>
<body>
<div class="page">

	<h1>Modules</h1>
	<h2>Block Structures</h2>
	<p>There are three basic block structures that you can build from. Examine how the structures work in Firebug, Dragonfly, WebKit Inspector or by applying the stylesheet mod_debug.css</p>
	<div class="line">
		<div class="unit size1of3">
			<div class="mod">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd">
						<h3>mod </h3>
					</div>
					<div class="bd">
						<p>Mod is the basic container, all other containers inherit from this one. This is the high performance container that should be used unless you specifically need another type of container.</p>
						<ul class="simpleList">
							<li>One tiny image</li>
							<li>Expands to any height or width</li>
							<li>Compatible with any content</li>
							<li>Choose for any container object that doesn't require outside transparency or complex borders.</li>
						</ul>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
		</div>
		<div class="unit size1of3">
			<div class="mod complex">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd">
						<h3>complex</h3>
					</div>
					<div class="bd">
						<p>complex should be used in cases where you require images for borders because borders or drop shadows are too complex to be simulated via borders on mod and/or inner.</p>
						<ul class="simpleList">
							<li>One image</li>
							<li>Height and width limited by image size</li>
							<li>Compatible with any content</li>
							<li>Choose when you require complex borders which cannot be simulated via css borders on mod and inner.</li>
						</ul>
						<p>Inspired by a conversation with Arnaud.</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
		</div>
		<div class="unit size1of3 lastUnit">
			<div class="mod pop">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd">
						<h3>pop </h3>
					</div>
					<div class="bd">
						<p>Use for popups and other containers that need outside transparency.</p>
						<ul class="simpleList">
							<li>One image</li>
							<li>Height and width limited by image size</li>
							<li>Compatible with any container, but not any content</li>
							<li>Choose when you require outside transparency which cannot be simulated. (do i need to make this work with clip rather than bkg position?)</li>
						</ul>
						<p>Inspired by <a href="http://www.lesliesommer.com/wdw07/html/" title="CSS Mojo: Adding Polish To Your Pages">Leslie Sommer’s Mojo blocks</a>.</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
		</div>
	</div>
	<h2>Block Skins</h2>
	<h3>Contour</h3>
	<div class="line">
		<div class=" unit size1of3">
			<h4>Extends mod</h4>
			<div class="mod grab">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd">
						<h3>grab</h3>
					</div>
					<div class="bd">
						<p>Body</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
			<div class="mod simpleExt">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd">
						<h3>simpleExt</h3>
					</div>
					<div class="bd">
						<p>Body</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
			<div class="mod simple">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd">
						<h3>simple</h3>
					</div>
					<div class="bd">
						<p>Body</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
			<div class="mod noted">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd">
						<h3>noted</h3>
					</div>
					<div class="bd">
						<p>Body</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
			<div class="mod talk">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd">
						<h3>talk</h3>
					</div>
					<div class="bd">
						<p>Body</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
			<div class="mod me">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd">
						<h3>me</h3>
					</div>
					<div class="bd">
						<p>Body</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
			<div class="mod basic">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd">
						<h3>basic</h3>
					</div>
					<div class="bd">
						<p>Must be combined with a background color or content, adds rounded corners.</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
		</div>
		<div class=" unit size1of3">
			<h4>Extends complex</h4>
			<div class="mod complex excerpt">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd section">
						<h3>excerpt</h3>
					</div>
					<div class="bd">
						<p>Body</p>
					</div>
					<div class="ft act">
						<p>Foot</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
			<div class="mod complex flow">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd">
						<h3>flow</h3>
					</div>
					<div class="bd">
						<p><a href="#">Body</a></p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
			<!--<div class="mod boo">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd">
						<h3>flow</h3>
					</div>
					<div class="bd">
						<p><a href="#">Body</a></p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>-->
			<div class="mod complex photo">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="bd">
						<img src="skin/kakapo.png" alt="boo" />
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
		</div>
		<div class=" unit size1of3 lastUnit">
			<h4>Extends pop</h4>
			<div class="mod pop sommers">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd">
						<h3>sommers</h3>
					</div>
					<div class="bd">
						<p>Body</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
			<div class="mod pop gonzalo">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd gonz">
						<h3>gonzalo</h3>
					</div>
					<div class="bd">
						<p>Body</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
		</div>
	</div>
	<h2>Background Objects</h2>
	<div class="line">
		<div class="unit size1of3">
			<div class="mod highlight">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd">
						<h3>highlight</h3>
					</div>
					<div class="bd">
						<p>Body</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
			<div class="mod universe">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd">
						<h3>universe</h3>
					</div>
					<div class="bd">
						<p>Body</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
		</div>
		<div class="unit size1of3">
			<div class="mod comment">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd">
						<h3>comment</h3>
					</div>
					<div class="bd">
						<p>Body</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
			<div class="mod foo">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd">
						<h3>foo</h3>
					</div>
					<div class="bd">
						<p>Body</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
		</div>
		<div class="unit size1of3 lastUnit">
			<div class="mod nicole">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd">
						<h3>nicole</h3>
					</div>
					<div class="bd">
						<p>Body</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
			<div class="mod login">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd">
						<h3>login</h3>
					</div>
					<div class="bd">
						<p>Body</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
		</div>

	</div>
	<h2>Block Headers</h2>
	<h3 class="bam">Bam</h3>
	<br />
	<h3 class="topper">Topper</h3>
	<br />
	<h3 class="section">Section</h3>
	<h2>Block Footers</h2>
	<div class="ft act">button here</div>

</div>
<!--<script type="text/javascript" src="http://webbits.pl/yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="http://webbits.pl/yui/build/dom/dom.js"></script>
<script type="text/javascript">
var currentStyles = YAHOO.util.Dom.getStyle(document.body, 'backgroundColor');
console.log(currentStyles);
</script>-->
</body>
</html>
